<!--  -->
<template>
  <div class="page-home">
    <!-- 首页头部 -->
    <index-header></index-header>

    <div class="index-main">
      <!-- 首页轮播 -->
      <swiper @change="onChange" class="lunbo" v-if="bannerList.length > 0">
        <swiperItem v-for="item in bannerList" :key="item.id">
          <img :src="item.imageurl" alt="" />
        </swiperItem>
        <!-- 这个时候轮播图会滑动不了，因为swiper是异步回来的，还没有请求完毕就渲染DOM中
      可以使用v-if，判断bannerlist的长度是否>0，如果为真就说明请求完毕了 -->
      </swiper>

      <!-- nav部分 -->
      <index-nav></index-nav>

      <!-- 漫画推荐部分 -->
      <index-recommend v-for="item in recommendList" :key="item.specialid" :recommendData="item"></index-recommend>
    </div>
  </div>
</template>
<script>
import { Swiper, SwiperItem } from '@/components/Swiper/index.js'
import IndexHeader from './components/IndexHeader'
import IndexNav from './components/IndexNav'
import IndexRecommend from './components/IndexRecommend'
import { getBanner, getIndexRecommend } from '@/api/cartoon'

export default {
  name: 'Home',
  components: {
    Swiper,
    SwiperItem,
    IndexHeader,
    IndexNav,
    IndexRecommend
  },

  data() {
    return {
      bannerList: [],
      recommendList: []
    }
  },

  methods: {
    onChange(index) {
      console.log('我滑动了第' + index + '张轮播图片')
    },

    // 请求轮播图片
    getLunbo() {
      getBanner()
        .then(res => {
          if (res.code === 200) {
            this.bannerList = res.info
          } else {
            alert('接口读取失败' + res.code_msg)
          }
        })
        .catch(err => {
          console.log(err)
          alert('网络异常，请稍后重试')
        })
    },

    // 获取首页推荐数据
    getRecommend() {
      getIndexRecommend()
        .then(res => {
          if (res.code === 200) {
            this.recommendList = res.info
          } else {
            alert('接口读取失败' + res.code_msg)
          }
        })
        .catch(err => {
          console.log(err)
          alert('网络异常，请稍后重试')
        })
    }
  },

  created() {
    this.getLunbo()
    this.getRecommend()
  }
}
</script>

<style lang="less">
.page-home {
  // z-index: 9998 !important;
  display: flex;
  flex-direction: column;
  height: 100%;
  .index-main {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 100px;
  }
  .lunbo img {
    width: 100%;
    height: 100%;
  }
}
</style>
